<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>跟单排行榜</title>
		<%@include file="/WEB-INF/base.jspf"%>
		<script src="//at.alicdn.com/t/font_621086_w750avfudnc7syvi.js"></script>
		<script src="/js/clipboard.min.js"></script>
		<link rel="stylesheet" href="/css/font_621086_w750avfudnc7syvi.css">
		<style type="text/css">
		    .icon {
		       width: 1em; height: 1em;
		       vertical-align: -0.15em;
		       fill: currentColor;
		       overflow: hidden;
		    }		
		    .div-c-spanTabs > div {
		    	flex:1;
		    	border:1px solid #cfd5d8; 
		    	display:block;
		    	border-top:none;
		    	border-right:none;
		    	padding:6px 4px;
		    	text-align: center;
		    	position: relative;
		    	cursor: pointer;
		    }
		    .div-c-spanTabs > div:after {
				content: "";
			    width: 100%;
			    height: 0;
			    border-bottom: 3px solid transparent;
			    position: absolute;
			    left: 0;
			    bottom: 0;
			    transition: all 0.3s;	    
		    }		    
		    .div-c-spanTabs > div.active:after {
			    border-bottom: 3px solid #059BF3;
		    }
		    .content {
		    	padding:0;
		    }
		    .tabContent {
		    	display:none;
		    	padding-top:10px;
		    }
		    .tabContent.active {
		    	display:block;
		    }
		    .div-c-spanTabs > div.active {
		    	background-color:#eee;
		    }
		    			.ul-c-detailOrder>tr>td {
				padding:4px!important;
			}
						.td-gendan-detail {
			cursor: pointer;}
			td.income-td {
				color:red;
				font-weight:bold;
			}
			#tbody-all-gendan td, .table-c-allGenDan th {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="bg-theme col-xs-12 col-sm-4 col-sm-offset-4 text-center top" stlye="padding-left:10px;padding-right:10px;">
				<a onclick="back()" class="glyphicon glyphicon-chevron-left fl" style="cursor:pointer; color: white;position:absolute;top:50%;transform:translateY(-50%);font-size: 20px;left:10px;"></a>
				<span style="font-weight:700;">跟单排行榜</span>
			</div>
		<div class="content col-xs-12 col-sm-4 col-sm-offset-4" style="margin-bottom:50px;">
			<div class="div-c-spanTabs" style="display:flex;">
				<div class="active" data-index="1" data-key="0">总排行</div>
				<div data-index="2" data-key="1">每日排行</div>
				<div data-index="3" data-key="2">每周排行</div>
				<div data-index="4" data-key="3">每月排行</div>
			</div>
			<div class="div-c-tabContentWrapper">
				<div class="tabContent active tabContent1"  style="padding-top:0;">
					<table class="table-c-allGenDan table table-striped table-bordered table-hover" style="margin-bottom:0;">
					<thead>
						<tr>
							<th style="display:none;"></th>
							<th style="display:none;"></th>
							<th style="display:none;"></th>
							<th style="display:none;"></th>
							<th style="display:none;"></th>
							<th>序号</th>
							<th>发起人</th>
							<th>收益(元)</th>
							<th>胜率</th>
							<th>详情</th>
						</tr>
					</thead>
					<tbody id="tbody-all-gendan">
					</tbody>
				</table>	
				</div>
			</div>
		</div>
		<div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center foot">
			<iframe src="f.jsp"></iframe>
		</div>
<div class="modal-div-fakeModal" id="div-i-noticeGenDan">
	<div class="div-c-modalContent">
		<h3 class="fakemodal-title"></h3>
		<div class="fakemodal-content"></div>
		<div class="fakemodal-btnsGroup"><button class="btn btn-default btn-class-closeFakeModal">关闭</button></div>
	</div>
</div>	
<div class="modal fade" id="detail-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-height:60vh;">
        <div class="modal-content" style="height:100%;">
            <div class="modal-header">
                <h4 class="modal-title" id="" style="text-align: center;">★跟单详情★</h4>
            </div>
            <div class="modal-body" style="overflow:auto;max-height:60vh;">
            	<table class="table table-striped table-bordered table-hover" style="overflow: auto;">
            		<tbody class="ul-c-detailOrder">
            			
            		</tbody>
            	</table>
<!--             	<ul class="ul-c-detailOrder">
            		<li></li>
            		<li></li>
            		<li></li>
            		<li></li>
            		<li></li>
            		<li></li>
            	</ul> -->
            </div>
            <div class="modal-footer" style="">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
	</body>
	<script ></script>
	<script type="text/javascript">
		var GLOBAL_KEY = 0
		$(".content").css("margin-top","50px")
		$(".div-c-spanTabs div").on(getEndClickEvent(), function(e) {
			var $self = $(e.currentTarget)
			var index = $self.attr("data-index")
			$self.siblings().removeClass("active")
			$self.addClass("active")
		})
		$(".table-c-allGenDan").DataTable({
		      "bLengthChange": true,      
		      "bSort": false,
		      "bAutoWidth": false,
		      "dom": 't<"toolbar" pi>',
		      'aLengthMenu':[10],
		       "searching": true,  
		      "stateSave": true,
		      "stateDuration": 365,
		         "columns": [
		                     { "data": "orderid", "className": "orderid-td hidden-td" },
		                     { "data": "paymoney", "className": "paymoney-td hidden-td" },
		                     { "data": "rebate", "className": "rebate-td hidden-td" },
		                     { "data": "userid", "className": "userid-td hidden-td" },
		                     { "data": "id", "className": "id-td hidden-td" },
		                     { "data": "xuhao", "className": "xuhao-td" },
		                     { "data": "faqiren", "className": "faqiren-td" },
		                     { "data": "income", "className": "income-td" },
		                     { "data": "shenglv", "className": "td-table-shenglv" },
		                     { "data": "xiangqing", "className": "td-gendan-detail td-gendan-control" },
		                 ],	
		      "ajax": {
	    	  	  "type": 'POST',
	    	      "url":"/gdrankings.do", 
	    	      "data": function(data) {
	    	    	  data.key = GLOBAL_KEY
	    	      },
	    	      "dataSrc": function(json) {
	    	    	  var newData = json
		  				if (newData.data.length == 0 || (newData.data.length == 1 && newData.data[0] == null)) {
		  					return []
		  				}
		  				var newDataArr = []
		  				for (var i = 0; i < newData.data.length; i++) {
		  					var item = newData.data[i]
		  					if (item == null) {
		  						return
		  					}
		  					var xuhao = i + 1
		  					var faqiren = item.huiyuanzh
		  					var shenglv = (Number(item.shenglv) * 100).toFixed(2)
		  					var newObj = {
		  						orderid: item.orderid,
		  						paymoney: item.payMoney,
		  						rebate: item.rebate,
		  						userid: item.userid,
		  						id: item.id,
		  						xuhao: xuhao,
		  						faqiren: faqiren,
		  						income: item.income,
		  						shenglv: String(shenglv) + "%",
		  						xiangqing: "详情",
		  					}
		  					newDataArr.push(newObj)
		  					//var html = "<tr data-orderid='" + item.orderid + "' data-paymoney='" + item.payMoney + "' data-rebate='" + item.rebate + "' data-userid='" + item.userid + "' data-id='" + item.id + "'><td>" + xuhao + "</td><td>" + faqiren + "</td><td class='td-table-shenglv'>" + shenglv + "%</td><td>认购中</td><td class='td-gendan-gendan td-gendan-control'>跟单</td><td class='td-gendan-detail td-gendan-control'>详情</td></tr>"
		  				}
		  				return newDataArr
	    	      }
		      },	
//		    "searching": true,l
		       "language": {//语言设置  
		            "zeroRecords": "暂无跟单",     
		            "sInfo": "第 _PAGE_ / _PAGES_ 页",     
		            "info": "没有数据",     
		            "oPaginate": {     
		                "sFirst": "首页",     
		                "sPrevious": "上一页",     
		                "sNext": "下一页",     
		                "sLast": "尾页"    
		          	},
		            "search":"",
		            "searchPlaceholder": "请输入关键字",
		            "infoFiltered":   "",
		            "infoEmpty":      "",
		         }
		    })
    		$("[data-key]").on(getEndClickEvent(), function(e) {
    			GLOBAL_KEY = Number($(e.currentTarget).attr("data-key"))
    			$(".table-c-allGenDan").DataTable().ajax.reload()
			})
		    var bindTableBtnEvent = function() {
		$(".table-c-allGenDan").on(getEndClickEvent(), "td.td-gendan-detail", function(event) {
			//<li style='font-weight:bold;'><i class='fa fa-star'></i> 期号 : " + qihaoValue + "</li>"
			var $parentTr = $(event.target).closest("tr")
			var idValue = $parentTr.find(".id-td").text()
			var payMoneyValue = $parentTr.find(".paymoney-td").text()
			var newRequest = {
				url: "/oneData.do",
				type: "post",
				data: {
					id:idValue
				},
				success: function(data) {
					var nData = JSON.parse(data)
					var newData = nData.data[0]
					$(".ul-c-detailOrder").html("")
					$(".ul-c-detailOrder").append("<tr><td style='font-weight:bold;'>彩种</td><td>" + newData.cname1 + "</td></tr>")
					$(".ul-c-detailOrder").append("<tr><td style='font-weight:bold;'>参与人数</td><td><span style='color:red;'>" + newData.counts + "</span>人</td></tr>")
					$(".ul-c-detailOrder").append("<tr><td style='font-weight:bold;'>佣金百分比</td><td style='color:red;'>" + String(newData.rebate * 100) + "%</td></tr>")
					$(".ul-c-detailOrder").append("<tr><td style='font-weight:bold;'>期号</td><td>" + newData.qihao + "</td></tr>")
					$(".ul-c-detailOrder").append("<tr><td style='font-weight:bold;'>发起时间</td><td>" + newData.createTime + "</td></tr>")
					$(".ul-c-detailOrder").append("<tr><td style='font-weight:bold;'>投注金额</td><td><span style='color:red;'>" + payMoneyValue + "</span>元</td></tr>")
					$(".ul-c-detailOrder").append("<tr><td style='font-weight:bold;'>方案中奖金额</td><td><span style='color:red;'>" + newData.goalmoney + "</span>元</td></tr>")
					$(".ul-c-detailOrder").append("<tr><td style='font-weight:bold;'>发起人收入金额</td><td><span style='color:red;'>" + newData.shouru + "</span>元</td></tr>")
					for (var i = 1; i < 41; i++) {
						var item = newData["cplay" + i]
						if (item != null) {
							$(".ul-c-detailOrder").append("<tr><td style='font-weight:bold;'>" + item + "</td><td>" + newData["str" + i] + "</td></tr>")
						}
					}
					$("#detail-modal").modal("show")
				},
				error: function(status) {
					showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "网络异常，请稍后重试")
				}
			}
			ajax(newRequest)	 		
			//
		})
	}
	//tbody-all-gendan
	bindTableBtnEvent()
	</script>
</html>